<template>
  <div>
    <!--页面头部分-->
<!--    <header>-->
<!--      <h5>旅游度假区月报数据可视化展示系统门户网站</h5>-->
<!--      <nav>-->
<!--        <ul>-->
<!--          <router-link to="/home1" tag="li">经济指标</router-link>-->
<!--          <router-link to="/home" tag="li">工业指标</router-link>-->
<!--          <router-link to="/home" tag="li">固定资产投资</router-link>-->
<!--          <router-link to="/home" tag="li">贸易及服务业指标</router-link>-->
<!--        </ul>-->
<!--      </nav>-->
<!--    </header>-->
    <!--页面主体部分-->
    <section class="mainbox-home">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel-home1">
          <h2>
            <a class="a-active" href="http://localhost:8080/home1">经济指标</a>
          </h2>
          <!-- 图表放置盒子 -->
          <div class="chart">
            <h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;按月度、季度查看【某城市】旅游度假区地区生产总值、工业总产值、全口径财政收入、进出口总额、工业投资等信息。</h6>
          </div>
          <v-chart class="chart"></v-chart>
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-home1-foot"></div>
        </div>
        <div class="panel-home1">
          <h2>
            <a class="a-active" href="http://localhost:8080/home2">产业结构</a>
          </h2>
          <div class="chart">
            <h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;按月度、季度展示【某城市】旅游度假区三次产业结构、规上工业产值、规上企业主要产品产量、规上工业分行业产量等信息。</h6>
          </div>
          <v-chart class="chart"></v-chart>
          <div class="panel-home1-foot"></div>
        </div>
      </div>

      <!-- 中间盒子 -->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>12345</li>
              <li>50000</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>系统使用人数</li>
              <li>系统支持人数</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart-earth" id="chart-earth"></div>
          <!--          <v-chart class="chart-earth" :option="option1" :autoresize="true"></v-chart>-->
        </div>
      </div>

      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel-home2">
          <h2>
            <a class="a-active" href="http://localhost:8080/home3">外资招商</a>
          </h2>
          <div class="chart">
            <h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;展示【某城市】旅游度假区新增外资项目情况，包含注册外资、实际使用外资、招商项目信息等字段。</h6>
          </div>
          <v-chart class="chart"></v-chart>
          <div class="panel-home2-foot"></div>
        </div>
        <div class="panel-home2">
          <h2>
            <a class="a-active" href="http://localhost:8080/home4">企业概览</a>
          </h2>
          <div class="chart">
            <h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;展示【某城市】旅游度假区重点业信息，企业概况及企业月度产值情况。对工业企业按照各维度进行排名。</h6>
          </div>
          <v-chart class="chart"></v-chart>
          <div class="panel-home2-foot"></div>
        </div>
      </div>
    </section>
  </div>

</template>


<script>
import '../assets/js/china'
import * as echarts from "echarts";

var geoCoordMap = {
  '上海': [121.4648, 31.2891],
  '东莞': [113.8953, 22.901],
  '东营': [118.7073, 37.5513],
  '中山': [113.4229, 22.478],
  '临汾': [111.4783, 36.1615],
  '临沂': [118.3118, 35.2936],
  '丹东': [124.541, 40.4242],
  '丽水': [119.5642, 28.1854],
  '乌鲁木齐': [87.9236, 43.5883],
  '佛山': [112.8955, 23.1097],
  '保定': [115.0488, 39.0948],
  '兰州': [103.5901, 36.3043],
  '包头': [110.3467, 41.4899],
  '北京': [116.4551, 40.2539],
  '北海': [109.314, 21.6211],
  '南京': [118.8062, 31.9208],
  '南宁': [108.479, 23.1152],
  '南昌': [116.0046, 28.6633],
  '南通': [121.1023, 32.1625],
  '厦门': [118.1689, 24.6478],
  '台州': [121.1353, 28.6688],
  '合肥': [117.29, 32.0581],
  '呼和浩特': [111.4124, 40.4901],
  '咸阳': [108.4131, 34.8706],
  '哈尔滨': [127.9688, 45.368],
  '唐山': [118.4766, 39.6826],
  '嘉兴': [120.9155, 30.6354],
  '大同': [113.7854, 39.8035],
  '大连': [122.2229, 39.4409],
  '天津': [117.4219, 39.4189],
  '太原': [112.3352, 37.9413],
  '威海': [121.9482, 37.1393],
  '宁波': [121.5967, 29.6466],
  '宝鸡': [107.1826, 34.3433],
  '宿迁': [118.5535, 33.7775],
  '常州': [119.4543, 31.5582],
  '广州': [113.5107, 23.2196],
  '廊坊': [116.521, 39.0509],
  '延安': [109.1052, 36.4252],
  '张家口': [115.1477, 40.8527],
  '徐州': [117.5208, 34.3268],
  '德州': [116.6858, 37.2107],
  '惠州': [114.6204, 23.1647],
  '成都': [103.9526, 30.7617],
  '扬州': [119.4653, 32.8162],
  '承德': [117.5757, 41.4075],
  '拉萨': [91.1865, 30.1465],
  '无锡': [120.3442, 31.5527],
  '日照': [119.2786, 35.5023],
  '昆明': [102.9199, 25.4663],
  '杭州': [119.5313, 29.8773],
  '枣庄': [117.323, 34.8926],
  '柳州': [109.3799, 24.9774],
  '株洲': [113.5327, 27.0319],
  '武汉': [114.3896, 30.6628],
  '汕头': [117.1692, 23.3405],
  '江门': [112.6318, 22.1484],
  '沈阳': [123.1238, 42.1216],
  '沧州': [116.8286, 38.2104],
  '河源': [114.917, 23.9722],
  '泉州': [118.3228, 25.1147],
  '泰安': [117.0264, 36.0516],
  '泰州': [120.0586, 32.5525],
  '济南': [117.1582, 36.8701],
  '济宁': [116.8286, 35.3375],
  '海口': [110.3893, 19.8516],
  '淄博': [118.0371, 36.6064],
  '淮安': [118.927, 33.4039],
  '深圳': [114.5435, 22.5439],
  '清远': [112.9175, 24.3292],
  '温州': [120.498, 27.8119],
  '渭南': [109.7864, 35.0299],
  '湖州': [119.8608, 30.7782],
  '湘潭': [112.5439, 27.7075],
  '滨州': [117.8174, 37.4963],
  '潍坊': [119.0918, 36.524],
  '烟台': [120.7397, 37.5128],
  '玉溪': [101.9312, 23.8898],
  '珠海': [113.7305, 22.1155],
  '盐城': [120.2234, 33.5577],
  '盘锦': [121.9482, 41.0449],
  '石家庄': [114.4995, 38.1006],
  '福州': [119.4543, 25.9222],
  '秦皇岛': [119.2126, 40.0232],
  '绍兴': [120.564, 29.7565],
  '聊城': [115.9167, 36.4032],
  '肇庆': [112.1265, 23.5822],
  '舟山': [122.2559, 30.2234],
  '苏州': [120.6519, 31.3989],
  '莱芜': [117.6526, 36.2714],
  '菏泽': [115.6201, 35.2057],
  '营口': [122.4316, 40.4297],
  '葫芦岛': [120.1575, 40.578],
  '衡水': [115.8838, 37.7161],
  '衢州': [118.6853, 28.8666],
  '西宁': [101.4038, 36.8207],
  '西安': [109.1162, 34.2004],
  '贵阳': [106.6992, 26.7682],
  '连云港': [119.1248, 34.552],
  '邢台': [114.8071, 37.2821],
  '邯郸': [114.4775, 36.535],
  '郑州': [113.4668, 34.6234],
  '鄂尔多斯': [108.9734, 39.2487],
  '重庆': [107.7539, 30.1904],
  '金华': [120.0037, 29.1028],
  '铜川': [109.0393, 35.1947],
  '银川': [106.3586, 38.1775],
  '镇江': [119.4763, 31.9702],
  '长春': [125.8154, 44.2584],
  '长沙': [113.0823, 28.2568],
  '长治': [112.8625, 36.4746],
  '阳泉': [113.4778, 38.0951],
  '青岛': [120.4651, 36.3373],
  '韶关': [113.7964, 24.7028]
};
var BJData = [
  [{
    name: '西安'
  }, {
    name: '北京',
    value: 100
  }],
  [{
    name: '西安'
  }, {
    name: '上海',
    value: 100
  }],
  [{
    name: '西安'
  }, {
    name: '广州',
    value: 100
  }],
  [{
    name: '西安'
  }, {
    name: '西宁',
    value: 100
  }],
  [{
    name: '西安'
  }, {
    name: '银川',
    value: 100
  }]
];
var SHData = [
  [{
    name: '西宁'
  }, {
    name: '北京',
    value: 100
  }],
  [{
    name: '西宁'
  }, {
    name: '上海',
    value: 100
  }],
  [{
    name: '西宁'
  }, {
    name: '广州',
    value: 100
  }],
  [{
    name: '西宁'
  }, {
    name: '西安',
    value: 100
  }],
  [{
    name: '西宁'
  }, {
    name: '武汉',
    value: 100
  }],
  [{
    name: '武汉'
  }, {
    name: '西宁',
    value: 100
  }],
  [{
    name: '武汉'
  }, {
    name: '哈尔滨',
    value: 100
  }],
  [{
    name: '武汉'
  }, {
    name: '乌鲁木齐',
    value: 100
  }],
  [{
    name: '西宁'
  }, {
    name: '银川',
    value: 100
  }]
];
var GZData = [
  [{
    name: '银川'
  }, {
    name: '北京',
    value: 100
  }],
  [{
    name: '银川'
  }, {
    name: '广州',
    value: 100
  }],
  [{
    name: '银川'
  }, {
    name: '上海',
    value: 100
  }],
  [{
    name: '银川'
  }, {
    name: '西安',
    value: 100
  }],
  [{
    name: '银川'
  }, {
    name: '西宁',
    value: 100
  }],
];
//航线上的飞机模型的矢量图
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

export default {
  name: 'HomeView',
  mounted() {
    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
    this.initMap()
  },
  methods: {
    // 时间格式化
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let week = date.getDay() // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // 拼接 时间格式处理
      return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
    },


    //用于返回起点名字、终点名字、起点坐标、终点坐标
    returnCoords(data) {
      let result = [];
      for (let i = 0; i < data.length; i++) {
        let fromcoords = geoCoordMap[data[i][0]["name"]];
        let tocoords = geoCoordMap[data[i][1]["name"]];
        result.push({
          fromname: data[i][0]["name"],
          toname: data[i][1]["name"],
          coords: [fromcoords, tocoords],
          value: data[i][1]["value"]
        })
      }
      return result
    },
    //返回航线和飞机的颜色：三种颜色（起点为广州的、上海的、北京的）
    returnColor(index) {
      return index === 0 ? "#6beef4" : (index === 1 ? "#ecc021" : "#73fa3b")
    },
    //初始化
    initMap() {
      let series = [];
      [GZData, SHData, BJData].forEach((item, index) => {
        series.push({
          type: "lines", //series.type = "lines"表名是想渲染模拟迁徙的模板
          name: index === 0 ? "广州" : (index === 1 ? "上海" : "北京"), //鼠标hover到航线上去显示不同的内容
          zlevel: index === 0 ? 0 : (index === 1 ? 1 : 2), //zleve控制飞机的图标的分层
          effect: {
            show: true,
            symbol: planePath, //把矢量图planPath赋值给symbol
            symbolSize: 18 // 控制矢量图的大小
          },
          //线条的样式
          lineStyle: {
            curveness: 0.2, //控制线条的弯曲度
            color: this.returnColor(index),//不同的起点显示不同的线条样式
            width: 3 //线条的宽度
          },
          data: this.returnCoords(item) //所有的航线起始地点的数据
        })
      })


      this.myEcharts = echarts.init(document.querySelector(".chart-earth"));
      let option = {

        title: {
          text: "中国航空航线" //整个的标题
        },
        //geo用于显示地图坐标
        geo: {
          map: "china", //导入的china.js，该文件中注册的china地图。
          zoom: 1.2, //默认显示的缩放倍数
          roam: true, //是否开启鼠标的缩放
          scaleLimit: { //控制鼠标缩放的最小倍数，最大倍数
            min: 1,
            max: 1
          },

          label: {
            show: true, //控制省份名称的显示隐藏
            offset: [0, 0], // 控制省份名称的偏移量
            color: "white" // 省份名称的字体颜色
          },

          //板块的颜色
          itemStyle: {
            normal: {
              areaColor: 'rgba(34, 70, 168, 0.7)',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: 'rgba(119, 139, 224, 0.548)'
            }
          },
          //鼠标移入某板块的样式设置
          emphasis: {
            //移入该板块时的板块颜色
            itemStyle: {
              areaColor: 'red',
            },
            //省份的名称颜色
            label: {
              color: "white"
            }
          },
        },

        series: series, //显示的数据
        //鼠标hover到航线上显示数据
        tooltip: {
          show: true,
          formatter: function (data) { //返回该航线的数据
            return data.data.fromname + ">>>" + data.data.toname + "：" + data.data.value
          }
        },
      }
      this.myEcharts.setOption(option)
    }
  },


  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  data() {
    return {
      newDate: new Date(),
      option1: {
        polar: {
          radius: [30, '80%']
        },
        radiusAxis: {
          max: 4
        },
        angleAxis: {
          type: 'category',
          data: ['a', 'b', 'c', 'd'],
          startAngle: 75
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [2, 1.2, 2.4, 3.6],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        },
        animation: false
      },
      option2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      option3: {
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu'],
          z: 10
        },
        polar: {},
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [2, 4, 6, 8],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      },
      option4: {
        dataset: [
          {
            dimensions: ['name', 'age', 'profession', 'score', 'date'],
            source: [
              ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
              ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
              ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
              ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
              ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
              ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
              ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
              ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
              ['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
            ]
          },
          {
            transform: {
              type: 'sort',
              config: { dimension: 'score', order: 'desc' }
            }
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {},
        series: {
          type: 'bar',
          encode: { x: 'name', y: 'score' },
          datasetIndex: 1
        }
      },
    }
  }
}
</script>
<style src="../views/css/demo.css" scoped>
/*@import "./css/demo.css";*/
/*  * {*/
/*    background-color: rgb(22, 122, 214);*/
/*  }*/
</style>

<!--<style scoped>-->
<!--  @import "./css/demo.css";-->
<!--</style>-->